<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Lightbox - UIkit tests</title>
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="js/test.js"></script>
    </head>

    <body>

        <div class="uk-container">

            <h1>Lightbox</h1>

            <h2>Dimensions</h2>

            <div class="uk-child-width-1-5" uk-grid uk-lightbox>
                <div>

                    <a class="uk-link-muted uk-text-center" href="images/size1.jpg" title="900x600" type="image">
                        <figure>
                            <img src="images/photo.jpg" width="400" alt="">
                            <figcaption class="uk-margin-small">900x600</figcaption>
                        </figure>
                    </a>

                </div>
                <div>

                    <a class="uk-link-muted uk-text-center" href="images/size2.jpg" title="700x500" type="image">
                        <figure>
                            <img src="images/photo.jpg" width="400" alt="">
                            <figcaption class="uk-margin-small">700x500</figcaption>
                        </figure>
                    </a>

                </div>
                <div>

                    <a class="uk-link-muted uk-text-center" href="images/photo.jpg" title="1800x1200" type="image">
                        <figure>
                            <img src="images/photo.jpg" width="400" alt="">
                            <figcaption class="uk-margin-small">1800x1200</figcaption>
                        </figure>
                    </a>

                </div>
                <div>

                    <a class="uk-link-muted uk-text-center" href="images/size-v.jpg" title="500x2000" type="image">
                        <figure>
                            <img src="images/photo.jpg" width="400" alt="">
                            <figcaption class="uk-margin-small">500x2000</figcaption>
                        </figure>
                    </a>

                </div>
                <div>

                    <a class="uk-link-muted uk-text-center" href="images/size-h.jpg" title="2000x500" type="image">
                        <figure>
                            <img src="images/photo.jpg" width="400" alt="">
                            <figcaption class="uk-margin-small">2000x500</figcaption>
                        </figure>
                    </a>

                </div>
            </div>

            <h2>Content Sources</h2>

            <div class="uk-child-width-1-5" uk-grid uk-lightbox>
                <div>

                    <a class="uk-link-muted uk-text-center" href="images/size1.jpg" title="Image" type="image">
                        <figure>
                            <img src="images/photo.jpg" width="400" alt="">
                            <figcaption class="uk-margin-small">Image</figcaption>
                        </figure>
                    </a>

                </div>
                <div>

                    <a class="uk-link-muted uk-text-center" href="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" title="Video">
                        <figure>
                            <img src="images/photo.jpg" width="400" alt="">
                            <figcaption class="uk-margin-small">Video</figcaption>
                        </figure>
                    </a>

                </div>
                <div>

                    <a class="uk-link-muted uk-text-center" href="https://www.youtube.com/watch?v=YE7VzlLtp-4" title="YouTube">
                        <figure>
                            <img src="images/photo.jpg" width="400" alt="">
                            <figcaption class="uk-margin-small">YouTube</figcaption>
                        </figure>
                    </a>

                </div>
                <div>

                    <a class="uk-link-muted uk-text-center" href="http://vimeo.com/1084537" title="Vimeo">
                        <figure>
                            <img src="images/photo.jpg" width="400" alt="">
                            <figcaption class="uk-margin-small">Vimeo</figcaption>
                        </figure>
                    </a>

                </div>

            </div>

            <h2>Dynamic lightbox</h2>

            <button id="lightbox" class="uk-button uk-button-default" type="button">Dynamic lightbox</button>

            <h2>Javascript Options</h2>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-striped">
                    <thead>
                        <tr>
                            <th>Option</th>
                            <th>Value</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>

        </div>

        <script>

            (function () {

                $('#lightbox').on('click', function (e) {
                    e.preventDefault();

                    UIkit.lightbox('#lightbox', {
                        items: [
                            {source: 'images/size1.jpg', title: '900x600', type: 'image'},
                            {source: 'images/size2.jpg', title: '700x500', type: 'image'},
                        ]
                    })[0].show();
                });

            })();

        </script>

    </body>
</html>
